<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>加油记录</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css">
<style type="text/css">
th, td, tr, p {
	text-align: center;
}
</style>
</head>
<body>
	<!-- 面板 -->
	<div class="panel panel-default">
		<!-- 面板头-->
		<div class="panel-heading">
			<i class="glyphicon glyphicon-th"> 加油记录表</i>
		</div>
		<!-- 面板体-->
		<div class="panel-body">
			<form class="form-inline" role="form" style="float: left;"
				id="query_form">
				<div class="form-group has-feedback">
					<button type="button" class="btn dropdown-toggle"
						id="dropdownMenu1" data-toggle="dropdown">
						车牌号码 <span class="caret"></span>
					</button>
					<input class="form-control has-success" type="text"
						name="refuelCarlicense" placeholder="此处输入车牌号码，支持模糊查询" id="hold">
					<button type="button" class="btn btn-warning" id="query">
						<i class="glyphicon glyphicon-search"></i> 查询
					</button>
					<ul class="dropdown-menu" role="menu"
						aria-labelledby="dropdownMenu1">
						<li role="presentation"><a role="menuitem" tabindex="-1"
							href="#" id="refuelCarlicense">车牌号码</a></li>
						<li role="presentation"><a role="menuitem" tabindex="-1"
							href="#" id="refuelUnit">加油站</a></li>
						<li role="presentation"><a role="menuitem" tabindex="-1"
							href="#" id="refuelDriver">驾驶员</a></li>
					</ul>
				</div>
			</form>
			<form method="post">
				<button type="button" class="btn btn-danger" id="deleteRecords"
					style="float: right; margin-left: 10px;">
					<i class="glyphicon glyphicon-trash"></i> 删除
				</button>
				<button type="button" class="btn btn-primary"
					style="float: right; margin-left: 10px;" id="addRefuel">
					<i class="glyphicon glyphicon-log-in"></i> 加油信息登记
				</button>
				<hr style="clear: both;">
				<!-- 响应式表格 -->
				<div class="table-responsive">
					<table class=".table table-striped table-bordered table-hover"
						style="margin: 20px auto; width: 100%">

						<thead>
							<tr>
								<th>
									<div class="checkbox">
										<label> <input type="checkbox" id="selectAll">全选
										</label>
									</div>
								</th>
								<th>车牌号码</th>
								<th>油气站</th>
								<th>加油时间</th>
								<th>油料标号</th>
								<th>单件(每升)</th>
								<th>本次加油量(升)</th>
								<th>本次加油总价</th>
								<th>本次加油里程(公里)</th>
								<th>上次加油里程(公里)</th>
								<th>上次加油量(升)</th>
								<th width="90px">操作</th>
							</tr>
						</thead>

						<tbody id="refuel_table">
						</tbody>
						<tfoot>
							<tr>
								<td colspan="12" align="center">
									<ul class="pagination">

									</ul>
								</td>
							</tr>
						</tfoot>
					</table>
					<div id="ps"></div>
					<input type="text" id="cur" value="" hidden="true">
					<input type="text" id="max" value="" hidden="true">
				</div>
			</form>
		</div>
	</div>

	<!-- 加油登记修改模态框begin -->
	<div class="modal fade" tabindex="-1" role="dialog" id="myModal"
		aria-labelledby="gridSystemModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="gridSystemModalLabel">
						<span class="glyphicon glyphicon-education" id="cicon"></span> <span id="title"> 加油信息登记</span>
					</h4>
				</div>
				<div class="modal-body">

					<form class="form-horizontal" id="do_refuel_form">
					<input type="text" name="_method" value="" hidden="true"> 
					<input type="text" name="refuelId" value="" hidden="true" id="aim"> 
						<div class="form-group form-group-md">
							<label class="col-sm-3 control-label" for="formGroupInputLarge">车牌号</label>
							<div class="col-sm-8" >
								<select id="car" class="form-control" name="refuelCarlicense" ></select>
							</div>
						</div>
						<div class="form-group form-group-md">
							<label class="col-sm-3 control-label" for="formGroupInputLarge">加油站</label>
							<div class="col-sm-8">
								<select id="rsite" class="form-control" name="refuelUnit"></select>
							</div>
						</div>
						<div class="form-group form-group-md">
							<label class="col-sm-3 control-label" for="formGroupInputLarge">加油时间</label>
							<div class="col-sm-8">
								<input class="form-control" type="datetime-local" id="rtime"
									name="refuelTime" placeholder="请选择加油时间">
							</div>
						</div>
						<div class="form-group form-group-md">
							<label class="col-sm-3 control-label" for="formGroupInputLarge">油料编号</label>
							<div class="col-sm-8">
								<select id="rcode" class="form-control" name="refuelCode"></select>
							</div>
						</div>
						<div class="form-group form-group-md">
							<label class="col-sm-3 control-label" for="formGroupInputLarge">油料单价(每升)</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" id="price"
									name="refuelPrice" placeholder="请输入油料单价">
							</div>
						</div>
						<div class="form-group form-group-md">
							<label class="col-sm-3 control-label" for="formGroupInputLarge">本次加油(升)</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" id="tsize"
									name="refuelCapacity" placeholder="请输油料加注容量">
							</div>
						</div>
						<div class="form-group form-group-md">
							<label class="col-sm-3 control-label" for="formGroupInputLarge">加油总价</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" id="tprice"
									name="refuelTotalprice" placeholder="请输油料加注总价格">
							</div>
						</div>
						<div class="form-group form-group-md">
							<label class="col-sm-3 control-label" for="formGroupInputLarge">本次里程(公里)</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" id="tmile"
									name="refuelThismileage" placeholder="请输入本次里程">
							</div>
						</div>
						<div class="form-group form-group-md">
							<label class="col-sm-3 control-label" for="formGroupInputLarge">上次里程(公里)</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" id="premile"
									name="refuelBeforemileage" placeholder="请输上次里程">
							</div>
						</div>
						<div class="form-group form-group-md">
							<label class="col-sm-3 control-label" for="formGroupInputLarge">上次加油(升)</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" id="presize"
									name="refuelBeforecapacity" placeholder="请输入上次油料加注容量">
							</div>
						</div>
						<div class="form-group form-group-md">
							<label class="col-sm-3 control-label" for="formGroupInputLarge">备注</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" id="note"
									name="refuelRemark" placeholder="请输入备注信息">
							</div>
						</div>
						<div class="form-group form-group-md">
							<label class="col-sm-3 control-label" for="formGroupInputLarge">加油人员</label>
							<div class="col-sm-8">
								<select id="driver" class="form-control" name="refuelDriver"></select>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="confirm_refuel">保存</button>
				</div>
			</div>
		</div>
	</div>
	<!-- 加油登记修改模态框end -->


	<!--删除确认模态框begin -->
	<div class="modal fade" tabindex="-1" role="dialog" id="deleteModal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">请确认</h4>
				</div>
				<div class="modal-body">
					<p id="delConfirm">确定要删除吗?</p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="delete_record">确认</button>
				</div>
			</div>
		</div>
	</div>
	<!--删除确认模态框end-->
	<!--操作结果模态框begin -->
	<div class="modal fade" tabindex="-1" role="dialog" id="update_result">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">操作结果</h4>
				</div>
				<div class="modal-body">
					<p id="result"></p>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal"
						id="res">确定</button>
				</div>
			</div>
		</div>
	</div>
	<!--操作结果模态框end-->


	<script
		src="${pageContext.request.contextPath}/static/jquery/jquery-2.1.1.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript">
	//默认时间
	var myDate = new Date(), 
	Y = myDate.getFullYear(), 
	M = myDate.getMonth() + 1, 
	D = myDate.getDate();
	H=myDate.getHours(); 
	m=myDate.getMinutes();
	//处理月是一位的情况
	if((M + '').length == 1){
		M = '0' + (M + '');
	}
	//处理日是一位的情况
	if((D + '').length == 1){
		D = '0' + (D + '')
	}
	
	if((H + '').length == 1){
		H = '0' + (H + '')
	}
	if((m + '').length == 1){
		m = '0' + (m + '')
	}
	var curDay = Y + '-' + M + '-' + D+'T'+H+':'+m;
		$(function() {
			loadRecord();
		})

		function loadRecord() {
			userAjax(1);
			$("#query").click(function() {
				$("#selectAll").prop("checked",false);
				userAjax(1);
			})
		}

		function userAjax(page) {
			$
					.ajax({
						url : "${pageContext.request.contextPath}/refuels/"
								+ page,
						type : "get",
						async : true,
						dataType : "json",
						data : $("#query_form").serialize(),
						success : function(datas) {
							var str = "";
							for (var i = 0; i < datas.data.list.length; i++) {
								str = str + "<tr>";
								str = str + "<td>";
								str = str
										+ "<input type='checkbox'  value='"+datas.data.list[i].refuelId+"'>";
								str = str + "</td>";
								str = str + "<td>"
										+ datas.data.list[i].refuelCarlicense
										+ "</td>";
								str = str + "<td>"
										+ datas.data.list[i].refuelUnit
										+ "</td>";
								str = str + "<td>"
										+ datas.data.list[i].refuelTime
										+ "</td>";
								str = str + "<td>"
										+ datas.data.list[i].refuelCode
										+ "</td>";
								str = str + "<td>"
										+ datas.data.list[i].refuelPrice
										+ "</td>";
								str = str + "<td>"
										+ datas.data.list[i].refuelCapacity
										+ "</td>";
								str = str + "<td>"
										+ datas.data.list[i].refuelTotalprice
										+ "</td>";
								str = str + "<td>"
										+ datas.data.list[i].refuelThismileage
										+ "</td>";
								str = str
										+ "<td>"
										+ datas.data.list[i].refuelBeforemileage
										+ "</td>";
								str = str
										+ "<td>"
										+ datas.data.list[i].refuelBeforecapacity
										+ "</td>";
								str = str + "<td>";

								str = str
										+ "<a class='btn btn-danger' name='delete'>";
								str = str
										+ "<span class='glyphicon glyphicon-remove'><span>";
								str = str + "</a> ";

								str = str
										+ "<a class='btn btn-success' name='updateRecord'>";
								str = str
										+ "<span class='glyphicon glyphicon-edit'><span>";
								str = str + "</a> ";

								str = str + "</td>";
								str = str + "</tr>";
							}
							$("#refuel_table").html(str);
							
							$("#cur").val(datas.data.pageNum);
							$("#max").val(datas.data.pages);
							
							var pageNum = datas.data.pageNum;
							var pages = datas.data.pages;
							var strPage="";
							strPage =strPage+"<li ><a href='#' id='first'>首页</a></li>"
							if (pageNum>1) {
								strPage =strPage+"<li><a href='#' id='before'>上一页</a></li>";
							}
							for (var i = 1; i <= pages; i++) {
								strPage = strPage
										+ "<li id='current'><a name='code' >"
										+ i + "</a></li>";
							}
							if (pageNum < pages) {
								strPage = strPage
										+ "<li><a  id='after'>下一页</a></li>";
							}
							strPage=strPage+"<li><a  id='end'>尾页</a></li>";
							$(".pagination").html(strPage);
							var strp="<p>共"+pages+"页&nbsp;&nbsp;&nbsp;当前第"+pageNum+"页&nbsp;&nbsp;&nbsp;总共"+datas.data.total+"条记录</p>";    
							$("#ps").html(strp);
						    deleteRecords();
							deleteRecord();
							operRefuel();
							isSelectAll();
							queryByCondition();
							calPrice();
							showPage();
							beforeAndAfter(page);
						}
					})
		}
		function showPage(){
			$("[name=code]").click(function(){
					var page=$(this).text();
					/* var ids =$(this).parent("li").attr("id"); */
					/* $(this).parent().first().attr("class","active"); */
					userAjax(page)
				})
			$("#before").click(function(){
			 var page=$("#cur").val()-1;
				userAjax(page); 
			})
			$("#after").click(function(){
			 var page=$("#cur").val()-(-1);
				userAjax(page); 
			})
			$("#first").click(function(){
				userAjax(1);
			})
			$("#end").click(function(){
				userAjax($("#max").val());
			})
		} 
		function queryByCondition() {
			$("[role=menuitem]").click(function() {
				var t = $(this).text();
				$("#hold").attr("placeholder", "请输入" + t + ",支持模糊查询");

				var name = $(this).attr("id");
				$("#hold").attr("name", name);

				t = t + "<span class='caret'></span>";
				$("#dropdownMenu1").html(t);
			})
		}
		function getSelect(refuelId) {
			$.ajax({
				url : "${pageContext.request.contextPath}/selects/"+refuelId,
				type : "get",
				async : true,
				dataType : "json",
				success : function(datas) {
					 var strCar = "";
					for (var i = 0; i < datas.data.cars.length; i++) {
						strCar = strCar + "<option class='op'>"
								+ datas.data.cars[i] + "</option>";
					}
					$("#car").html(strCar);

					var strSite = "";
					for (var i = 0; i < datas.data.sites.length; i++) {
						strSite = strSite + "<option op='carlable'>"
								+ datas.data.sites[i] + "</option>";
					}
					$("#rsite").html(strSite);

					var strCode = "";
					for (var i = 0; i < datas.data.sites.length; i++) {
						strCode = strCode + "<option>"
								+ datas.data.codes[i] + "</option>";
					}
					$("#rcode").html(strCode);

					var strDriver = "";
					for (var i = 0; i < datas.data.drivers.length; i++) {
						strDriver = strDriver + "<option>"
								+ datas.data.drivers[i] + "</option>";
					}
					$("#driver").html(strDriver);
					
				if(typeof(datas.data.refuel)=="undefined"){
					$("#cicon").attr("class","glyphicon glyphicon-plus-sign");
					$("#title").text("加油信息登记");
					$("#car").attr("disabled",false);
					$("#rtime").attr("disabled",false);
					$("#rtime").val(curDay);
					$("#rcode").val("");
				    $("#price").val("");
					$("#tsize").val("");
				    $("#tprice").val("");
					$("#tmile").val("");
					$("#premile").val("");
					$("#presize").val("");
					$("#note").val("");

					
					$("#rcode").val(datas.data.preRefuel.refuelCode);
					$("#price").val(datas.data.preRefuel.refuelPrice);
					$("#premile").val(datas.data.preRefuel.refuelBeforemileage);
					$("#presize").val(datas.data.preRefuel.refuelBeforecapacity);
					}else{
						 $("#cicon").attr("class","glyphicon glyphicon-pencil");
						 $("#title").text("加油信息修改");
						for (var i = 0; i < datas.data.cars.length; i++) {
							if(datas.data.cars[i]==datas.data.refuel.refuelCarlicense){
								$("#car").val(datas.data.cars[i]);
								break;
							}
						}
						$("#car").attr("disabled",true);
						for (var i = 0; i < datas.data.sites.length; i++) {
							if(datas.data.sites[i]==datas.data.refuel.refuelUnit){
								$("#rsite").val(datas.data.sites[i]);
								break;
							}
						}
						$("#aim").val(datas.data.refuel.refuelId);
						$("#car").val(datas.data.refuel.refuelCarlicense);
						$("#rtime").val(datas.data.refuel.refuelTime);
						$("#rtime").attr("disabled",true);
						
						$("#rcode").val(datas.data.refuel.refuelCode);
					    $("#price").val(datas.data.refuel.refuelPrice);
						$("#tsize").val(datas.data.refuel.refuelCapacity);
						$("#tprice").val(datas.data.refuel.refuelPrice);
						$("#tmile").val(datas.data.refuel.refuelThismileage);
						$("#premile").val(datas.data.refuel.refuelBeforemileage);
						$("#presize").val(datas.data.refuel.refuelBeforecapacity);
						$("#note").val(datas.data.refuel.refuelRemark);
						doCal();
					} 
				}
			})
		}
		function operRefuel() {
			$("#addRefuel").click(function() {
				var refuelId=0;
				getSelect(refuelId);
				$("#myModal").modal("show");
				doRefuel(refuelId);
			})
			$("[name=updateRecord]").click(function() {
				var refuelId=$(this).parents("tr").children("td").first().children("input").val();
				getSelect(refuelId);
				$("#myModal").modal("show");
				doRefuel(refuelId);
			})
		}
		function doRefuel(refuelId){
			$("#confirm_refuel").unbind("click").click(function(){
				if(refuelId==0){
					$("#aim").val("");
					$("[name=_method]").val("");
				}else{
			        $("[name=_method]").val("put");
			     }
			$.ajax({ 
				url:"${pageContext.request.contextPath}/refuel",
				type:"post",
				async:true,
				dataType:"json",
				data:$("#do_refuel_form").serialize(),
				success:function(datas){
					$("#myModal").modal("hide");
					$("#result").html(datas.message);
					$("#update_result").modal("show");
					$("#selectAll").prop("checked",false);
					loadRecord();
				}
			})
			})
		}
		function calPrice(){
			$("#car").change(function(){
				 var carlicense=$(this).val();
				$.ajax({
					url:"${pageContext.request.contextPath}/refuel/"+carlicense,
					type:"get",
					async:true,
				    dataType:"json",
					success:function(datas){
						$("#rcode").val(datas.data.refuelCode);
					    $("#price").val(datas.data.refuelPrice);
						$("#premile").val(datas.data.refuelBeforemileage);
						$("#presize").val(datas.data.refuelBeforecapacity);
						doCal();
					}
				}) 
			})
			
		}
        function doCal(){
        	$("#tsize").blur(function(){
				var tprice=new Number($("#price").val()*$(this).val());
				$("#tprice").val(tprice.toFixed(2));
			})
        }
		function isSelectAll() {
			$("#selectAll").click(function() {
				var check = $(this).prop('checked');
				if (check) {
					$(":checkbox").prop('checked', true);
				} else {
					$(":checkbox").prop('checked', false);
				}
			})
			$(".selectItem").click(function() {
				var selectAll = true;
				$(".selectItem").each(function() {
					var res = $(this).prop('checked');
					if (!res) {
						selectAll = false;
						$("#selectAll").prop('checked', false);
					}
				})
				if (selectAll) {
					$("#selectAll").prop('checked', true);
				}
			})
		}
		function deleteRecords() {
			$("#deleteRecords").click(function() {
				var selectIds = [];
				$("input:checked").each(function() {
					var id = $(this).attr("value");
					if (id != null) {
						selectIds.push(id);
					}
				})
				var idLength = selectIds.length;
				if (idLength!= 0) {
					$("#deleteModal").modal("show");
					$("#delete_record").unbind("click").click(function() {
						 $.ajax({
							url : "${pageContext.request.contextPath}/refuel",
							type : "post",
							async : true,
							dataType : "json",
							data:{refuelIds:selectIds.join(","),_method:"delete"},
							success:function(datas){
								$("#deleteModal").modal("hide");
								$("#result").html(datas.message);
								$("#update_result").modal("show");
								$("#selectAll").prop("checked",false);
							    loadRecord(); 
							}
						}) 
					})
				} else {
					$("#result").html("删除至少选中一条记录");
					$("#update_result").modal("show");
				}
			})
		}
		function deleteRecord() {
			$("[name=delete]").click(
					function() {
						var selectId = $(this).parents("tr").children("td")
								.first().children("input").val();
						$("#deleteModal").modal("show");
						$("#delete_record").unbind("click").click(function() {
							$.ajax({
								url : "${pageContext.request.contextPath}/refuel",
								type : "post",
								async : true,
								dataType : "json",
								data:{refuelIds:selectId,_method:"delete"},
								success:function(datas){
									$("#deleteModal").modal("hide");
									$("#result").html(datas.message);
									$("#update_result").modal("show");
									$("#selectAll").prop("checked",false);
								loadRecord();
								}
							})
						})
					})
		} 
	</script>
</body>
</html>